{extend name='public/base' /}

{block name="style"}
{css href="/static/umeditor/themes/default/css/umeditor.css" /}
{css href="/static/inspinia/css/plugins/dropzone/basic.css" /}
{css href="/static/inspinia/css/plugins/dropzone/dropzone.css" /}
{/block}

{block name="breadcrumb"}
{$crumbs}
{/block}

{block name="body"}
<div class="col-lg-12">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="row">
                <div class="col-sm-4 b-r">
                    <form role="form" action="{:url('save_banner')}" method="post" autocomplete="off" data-form="form">
                        <div class="form-group">
                            <label>title</label>
                            <input type="text" name="name" placeholder="title" class="form-control" value="{$banner.name|default=''}">
                        </div>
                        <div class="form-group">
                            <label>跳转链接</label>
                            <input type="text" name="url" placeholder="url" class="form-control" value="{$banner.url|default=''}">
                        </div>
                        <div class="form-group">
                            <label>排序</label>
                            <input type="text" name="sort" placeholder="0" class="form-control" value="{$banner.sort|default=''}">
                        </div>
                        <div class="form-group">
                            <label>是否显示</label>
                            <div class="ibox float-e-margins">
                                <div class="switch">
                                    <div class="onoffswitch">
                                        <input type="checkbox" name="is_show" {$banner.is_show ? 'checked' : ''} class="onoffswitch-checkbox" id="example1" value="1">
                                        <label class="onoffswitch-label" for="example1">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <input type="hidden" name="id" value="{$banner.id|default=0}">
                            <button class="btn btn-sm btn-primary m-t-n-xs" type="submit"><strong>确定</strong></button>
                        </div>
                    </form>
                </div>
                {notempty name="banner" }
                <div class="col-sm-8 b-r">
                    <div class="ibox-content">

                        <form id="my-awesome-dropzone" class="dropzone" action="{:url('upload_banner', ['id' => $banner['id']])}" style="min-height: 160px;">
                            <div class="dropzone-previews"></div>
                            <button type="submit" class="btn btn-primary pull-right">提交</button>
                        </form>
                        {notempty name="banner.image" }
                            <img style="max-width: 750px; max-height: 500px; margin-top: 20px;" src="/uploads/banner/{$banner.image}" />
                        {/notempty}
                    </div>
                </div>
                {/notempty}
            </div>
        </div>
    </div>
</div>
{/block}

{block name="javascript"}
{js href="/static/inspinia/js/plugins/dropzone/dropzone.js" /}
<script>
    $(document).ready(function(){
        Dropzone.options.myAwesomeDropzone = {
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            // Dropzone settings
            init: function() {
                var myDropzone = this;

                this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                });
                this.on("sendingmultiple", function() {
                });
                this.on("successmultiple", function(files, response) {
                    //window.location.reload();
                    console.log(files);
                    console.log(response);
                    if (response.code == 200) {
                        swal({
                            title: response.msg,
                            type: "success"
                        }, function () {
                            setTimeout(function () {
                                window.location.reload();
                            }, 300);

                        });
                    }
                });
                this.on("errormultiple", function(files, response) {
                });
            }
        }
    });
</script>
{/block}